<template>
  <div>
    <h2>官方榜</h2>
    <div class="container">
      <div style="width: 100%">
        <btable :dataList="soaringList?soaringList?.tracks?.slice(0, 5):''" class="container_table"
                :src="soaringList?.coverImgUrl"></btable>
        <el-button text type="primary" @click="$router.push( {path: '/detail' ,query:{id:soar}})">显示更多
        </el-button>
      </div>
    </div>
    <div class="container">
      <div style="width: 100%">
        <btable :dataList="originalLsit?originalLsit?.tracks?.slice(0, 5):''" class="container_table"
                :src="originalLsit?.coverImgUrl"></btable>
        <el-button text type="primary" @click="$router.push( {path: '/detail' ,query:{id:original}})">显示更多
        </el-button>
      </div>
    </div>
    <div class="container">
      <div style="width: 100%">
        <btable :dataList="newSongLsit?newSongLsit?.tracks?.slice(0, 5):''" class="container_table"
                :src="newSongLsit?.coverImgUrl"></btable>
        <el-button text type="primary" @click="$router.push( {path: '/detail' ,query:{id:newSong}})">显示更多
        </el-button>
      </div>
    </div>
    <div class="container">
      <div style="width: 100%">
        <btable :dataList="hotSongLsit?hotSongLsit?.tracks?.slice(0, 5):''" class="container_table"
                :src="hotSongLsit?.coverImgUrl"></btable>
        <el-button text type="primary" @click="$router.push( {path: '/detail' ,query:{id:hotSong}})">显示更多
        </el-button>
      </div>
    </div>
    <span class="cradSong">
      <div v-for="item in allinLsit" :key="item.id">
      <card :src="item.coverImgUrl" :description='item.name'
            @click="$router.push( {path: '/detail' ,query: {id:item.id}})"></card>
      </div>
    </span>
    <div style="height: 230px;"></div>
  </div>


</template>

<script setup>
import rankingCard from "~/pages/fristPage/leaderboard/components/rankingCard.vue";
import btable from "~/pages/fristPage/leaderboard/components/btable.vue";
import {ref} from "vue";
import {getsoarApi, GetAllListsApi} from "~/commonApi/api"
import card from "~/components/card.vue"
//飙升榜
const soar = 19723756
const soaringList = ref({})
//原创榜
const original = 2884035
const originalLsit = ref({})
//新歌榜
const newSong = 3779629
const newSongLsit = ref({})
//热歌榜
const hotSong = 3778678
const hotSongLsit = ref({})
//所有榜单
const allinLsit = ref([])
//飙升榜数据
const GetsoaringList = async (id, text) => {
  const res = await getsoarApi(id)
  const response = await GetAllListsApi()
  allinLsit.value = response.list.slice(4, response.list.length)
  if (text == 'soar') {
    soaringList.value = res.playlist
    console.log(soaringList.value, 'soaringList.value')
  } else if (text == 'original') {
    originalLsit.value = res?.playlist
  } else if (text == 'newSong') {
    newSongLsit.value = res?.playlist
  } else {
    hotSongLsit.value = res?.playlist
  }
}
GetsoaringList(soar, 'soar')
GetsoaringList(original, 'original')
GetsoaringList(newSong, 'newSong')
GetsoaringList(hotSong, 'hotSong')


</script>

<style scoped lang="scss">
.container {
  margin: 20px;

  .container_table {
    width: 100%;
  }
}

.cradSong {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(5, 16%);
  margin-top: 5px;
}

</style>